<div class="statistics-container">
  <aside class="statistics-aside">
    <app-device-tag-selector fxFlexFill [deviceCategories]="deviceCategories" [multipleFarm]="true" [choiceDeviceCount]="deviceCountLimit"
      [defaultChooseDeviceCount]="defaultChooseDeviceCount" (selectedDevicesChange)="onSelectedDevicesChange($event)">
    </app-device-tag-selector>
  </aside>

  <section class="statistics-main">
    <div class="progress-bar" *ngIf="isShowBar"></div>
    <header>
      <div class="statistics-main-header">
        <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
          日
        </span>

        <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
          周
        </span>
        <span (click)=onClickHeader(2) [ngClass]="{on:active==2}">
          月
        </span>

      </div>

      <div class="header">
        <span *ngIf="active!==2">
          <section>
    <p-calendar [locale]="en" [(ngModel)]="currentTime" showTime="showTime" hourFormat="24"></p-calendar>
    </section>     
        </span>



        <span *ngIf="active==2">
          {{currentYear}}年 第
          <select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
            <option [value]="month" *ngFor="let month of months"> {{month}}</option>
          </select>
          月
        </span>

        <!--<span *ngIf="active==1">
           第
          <select class="week" [ngModel]="currentWeek" (ngModelChange)=" onChangeWeek($event)">
            <option [value]="week" *ngFor="let week of weeks"> {{week}}</option>
          </select>
          周
        </span>-->

        <input type="text" class="divDeviceName" [(ngModel)]="divDeviceName" placeholder="请输入设备名称" (keyup)="onKeyup($event)">

        <section>
          <button class="button-trend" (click)="onSearch(active)">确定</button>
          <i class="exp">
            <a (click)="exportData()" id="ex">导出</a>
          </i>

        </section>



      </div>


    </header>

    <div class="statistics-table">
      <p-dataTable [value]="warmCountFilterData" [rows]="pageSize" [paginator]="true" [totalRecords]="warmCountFilterData.length"
        [sortField]="sortF" [sortOrder]="sortO">
        <p-column header="序号">
          <ng-template let-data="rowData" let-i="rowIndex" pTemplate="body">
            <span>{{ i + 1 }}</span>
          </ng-template>
        </p-column>
        <p-column field="deviceName" header="设备名称"></p-column>
        <p-column field="stateName" header="状态"></p-column>
        <p-column field="warmsCount" header="预警次数" [sortable]="true"></p-column>
        <p-column field="warmWorkTime" header="持续时间(h)" [sortable]="true"></p-column>
      </p-dataTable>
    </div>

    <div class="tab-excel" hidden>
<!-- 设置border="1"以显示表格框线 -->
<table id="ex-tab-statistics" border="1">
<!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
<caption border="1">{{startTime | date:'yyyy-MM-dd HH:mm:ss'}}--{{endTime | date:'yyyy-MM-dd HH:mm:ss'}}预警统计</caption>
<thead>
<tr>
<th>序号</th>
<th>设备名称</th>
<th>状态</th>
<th>预警次数</th>
<th>持续时间(h)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of warmCountFilterData; let i=index">
<td>{{ i + 1}}</td>
<td>{{item.deviceName}}</td>
<td>{{item.stateName}}</td>
<td>{{item.warmsCount}}</td>
<td>{{item.warmWorkTime}}</td>
</tr>
</tbody>
</table>
</div>

  </section>
</div>